import React from 'react';
import {View, StyleSheet} from 'react-native';
import {normalize} from '../../../utils/adapter';
import {
  ScreenHeight,
  ScreenWidth,
  StatusBarHeight,
} from '../../../config/devices';
import {ShimmerSkeleton} from '../../../kit/skeleton';

function UserInfoSkeleton() {
  return (
    <View style={styles.user_card_view}>
      <ShimmerSkeleton style={styles.avatar_view} />
      <View style={styles.nickname_container}>
        <ShimmerSkeleton style={[styles.line, {width: '60%'}]} />
        <ShimmerSkeleton style={[styles.line, {width: '40%'}]} />
      </View>
    </View>
  );
}

function CurWalletSkeleton() {
  return (
    <View style={styles.wallet_view}>
      <View style={{flexDirection: 'row', gap: normalize(10)}}>
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
      </View>
      <View
        style={{
          flexDirection: 'row',
          gap: normalize(10),
          marginTop: normalize(10),
        }}>
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
      </View>
      <View
        style={{
          flexDirection: 'row',
          gap: normalize(10),
          marginTop: normalize(10),
        }}>
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
      </View>
      <View
        style={{
          flexDirection: 'row',
          gap: normalize(10),
          marginTop: normalize(10),
        }}>
        <ShimmerSkeleton style={[styles.line, {flex: 1}]} />
      </View>
    </View>
  );
}

function MuneSekleton() {
  return (
    <View style={styles.menu_view}>
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
      <ShimmerSkeleton style={[styles.menu_line, {width: '100%'}]} />
    </View>
  );
}

export default function () {
  return (
    <View style={styles.container}>
      <UserInfoSkeleton />
      <CurWalletSkeleton />
      <MuneSekleton />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: ScreenHeight,
    marginTop: StatusBarHeight,
    paddingHorizontal: normalize(12),
    paddingVertical: normalize(12),
    width: ScreenWidth,
  },
  user_card_view: {
    flexDirection: 'row',
  },
  avatar_view: {
    width: normalize(60),
    height: normalize(60),
    borderRadius: normalize(60),
  },
  nickname_container: {
    flex: 1,
    marginLeft: normalize(14),
    justifyContent: 'space-around',
  },
  line: {
    height: 14,
    backgroundColor: '#e0e0e0',
    borderRadius: 4,
  },
  menu_line: {
    height: 46,
    backgroundColor: '#e0e0e0',
    borderRadius: 4,
    marginTop: normalize(10),
  },
  wallet_view: {
    marginTop: normalize(50),
  },
  menu_view: {
    flex: 1,
    marginTop: normalize(20),
  },
});
